<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-04-01 
 -->


<template>
  <el-form class="absolute top-0 z-10" :model="query.form" inline="inline" label-position="right" label-width="100px" size="mini">

    <el-form-item label="选择地区" class="mb-10 mt-10">
      <el-cascader v-model="query.form.city" :options="query.districts" :props="query.districtProps" @change="districtsChange" />
    </el-form-item>

    <el-form-item label="图层类型" class="mb-10 mt-10">
      <el-radio-group v-model="query.form.featureEffectType" @change="changeFeatureEffect">
        <el-radio label="要素图层"></el-radio>
        <el-radio label="热力图层"></el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item class="mb-10 mt-10">
      <el-button class="button" type="primary" size="mini" @click.prevent="spaceQueryBtn">矩形查询</el-button>
    </el-form-item>

  </el-form>
</template>

<script>
import { getBoundary } from "@/api";
import eventBus, { FLY_DISTRICTS, FEATURE_EFFECT, SPACE_QUERY } from "../bus";
export default {
  name: 'Search',
  data() {
    return {
      query: {
        form: {
          city: [],
          featureEffectType: "要素图层"
        },
        districts: [],
        districtProps: {
          value: "name",
          label: "name",
          children: "districts",
          emitPath: false
        }
      }
    };
  },

  mounted() {
    this.getDistrict();
  },

  methods: {
    districtsChange(val) {
      eventBus.$emit(FLY_DISTRICTS, val);
    },
    changeFeatureEffect(val) {
      eventBus.$emit(FEATURE_EFFECT, val);
    },
    spaceQueryBtn() {
      eventBus.$emit(SPACE_QUERY, "Polygon");
    },
    async getDistrict() {
      const params = { keywords: "武汉市", subdistrict: 1, extensions: "base" };
      const { status, info, districts, } = await getBoundary(params);
      if (!status) return this.$message.error(info);
      const data = this.deep(districts[0].districts);
      this.query.districts = data;
    },
    deep(data) {
      data.forEach(item => {
        if (item.districts.length) this.deep(item.districts)
        else item.districts = undefined;
      });
      return data;
    }
  },
  beforeDestroy() {
    eventBus.$off([FLY_DISTRICTS, FEATURE_EFFECT]);
  },
  //  End
}

</script>

<style lang='css' scoped>

</style>
